<template>
	<view class="content" id="content">


		<!-- <u-navbar   :is-back="true" backIconName='arrow-left'  :titleBold="true" title="班级圈"  :background="{ background: '#f8f8f8'  }" title-color="#404133" :border-bottom="false" z-index="1001">
		</u-navbar> -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar :placeholder='true' :isBack='false' title="班级圈" :titleBold='true' backIconSize='30'
			:background="{ background: '#f8f8f8' }" :border-bottom="false">
			<view class="u-nav-slot" slot="right"><u-icon name="camera-fill" v-if="$isPermission('find_add')" size="30"
					@click="linkToRelease"></u-icon>
			</view>

		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :placeholder='true' title="班级圈" :titleBold='true' backIconSize='30'
			:background="{ background: '#f8f8f8' }" :border-bottom="false">

			<view class="u-nav-slot" slot="left"><u-icon name="camera-fill" v-if="$isPermission('find_add')" size="30"
					@click="linkToRelease"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- 朋友圈列表 -->
		<view class="content-circle">
			<view class="content-circle-box" v-for="(item, index) in circleData" :key="index">
				<view class="headimg">
					<image v-if='item.staffPhoto' class="img" :src="item.staffPhoto"></image>
					<image v-else class="img" src="../../../static/ls.png"></image>
				</view>
				<view class="content">
					<view class="content-name" @tap="linkToBusinessCard(item.userId)">{{ item.userName }}</view>
					<view class="content-desc">{{ item.content }}</view>
					<view class="" v-if="item.circleVideo">
						<video :src="JSON.parse(item.circleVideo)"
							style="width: 200px;height: 200px;margin-top: 10rpx;">
							</video>
					</view>
					<view class="content-img" v-if="item.circleImage">
						<!-- //只有一张图时候 -->
						<view v-if="item.circleImage.length == 1">
							<image class="img-1" :src="item.circleImage[0]" mode="aspectFill"
								@tap="previewImg(0, item.circleImage)"></image>
						</view>
						<!-- 有多张图的时候 -->
						<view v-else-if="item.circleImage.length > 1">
							<view class="content-img-more">
								<image class="img-more" v-for="(src, indexx) in item.circleImage" :key="indexx"
									:class="indexx % 3 == 0 && 'img-3'" :src="src" mode="aspectFill"
									@tap="previewImg(indexx,item.circleImage)"></image>
							</view>
						</view>
					</view>
					<!-- 相对时间 点赞按钮等 -->
					<view class="relavivetime" :id="`comment-${'null'}-${index}`">
						<view class="time">{{ item.createTime }}
							<text class="del" v-if="user_info.userId==item.userId" @tap.stop='del(item.id)'>删除</text>
						</view>

						<view class="icon-box">
							<view @tap="clickThumb(item)">
								<image class="img icon-box-item thumb"
									:src="item.isPraise ? require('@/static/like-fill.png') : require('@/static/like.png')"
									mode=""></image>
							</view>
							<view @tap="handleComment(item.id, null, index)">
								<image class="img icon-box-item" :src="require('@/static/comment.png')" mode=""></image>
							</view>
						</view>
					</view>
					<!-- 点赞人 评论 -->
					<view class="msg-box">
						<view class="thumbinfo" v-if="item.praise.length">
							<image class="thumbinfo-icon" :src="require('@/static/like.png')"></image>
							<text class="thumbinfo-name" v-for="(userInfo, index) in item.praise" :key="userInfo.id"
								@tap="linkToBusinessCard(userInfo.id)">
								{{ userInfo.userName }}{{ index != item.praise.length - 1 ? '，' : '' }}
							</text>
						</view>
						<view class="comment" v-if="item.comment.length">
							<view class="comment-box" v-for="(comment, index) in item.comment" :key="index"
								hover-class="comment-hover-class" :id="`comment-${item.id}-${index}`"
								@tap="handleComment(item.id, comment, index)">
								<text class="comment-box-name" v-if="!comment.replyUserId"
									@tap.stop="linkToBusinessCard(comment.userId)">{{ comment.userName }}：</text>
								<text class="comment-box-name" v-if="comment.replyUserId"
									@tap.stop="linkToBusinessCard(comment.userId)">
									{{ comment.userName }}
									<text class="callback">回复</text>
								</text>
								<text v-if="comment.replyUserId" class="comment-box-name"
									@tap.stop="linkToBusinessCard(comment.replyUserId)">{{ comment.replyUserName }}：</text>
								<text class="comment-box-content">{{ comment.content }}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<u-loadmore :status="status" />
			<!-- #ifdef H5 -->
			<view :style="{ height: showInput ? '100rpx' : 0 }"></view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view :style="{ height: viewOffsetBottom + 'px' ,}"></view>
			<!-- #endif -->
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pub">
				<!-- <view class="pubType" v-for="(it,i) in imgList" :key="i" @click="sendText(i)">
				<img :src='it.imgUrl' alt="" style="width: 30px;" srcset="">{{it.text}}
			</view> -->
				<view class="pubType">
					<view class=" t-icon t-icon-tubiaozhizuomobanyihuifu-" style="width: 60rpx;height: 60rpx;"
						@click="sendText">

					</view>
					<view class="">
						发文字/图片
					</view>
				</view>
				<view class="pubType">
					<view class="t-icon t-icon-shipin" style="width: 60rpx;height: 60rpx;" @click="sendVideo">

					</view>
					<view class="">
						发视频
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="foot" v-if="showInput">
			<chat-input @send-message="sendMsg" @blur="blurInput" :focus="showInput"
				:placeholder="placeholder"></chat-input>
			<!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
		</view>
		<!-- 底部聊天输入框 其实可以封装成组件的...-->
		<!-- <view class="input-box" v-if="showInput" id="input-box"
			:style="{ bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0' }">
			<view class="input-box" v-show="showInput" id="input-box"
				:style="{ bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0' }">
				<view class="input-box-flex">
					<view class="input-box-flex-grow">
						<input type="text" class="content" id="input" v-model="content" :adjust-position="false"
							:confirm-type="'send'" :confirm-hold="true" placeholder-style="color:#DDD;"
							:cursor-spacing="6" :placeholder="placeholder" :focus="showInput" @blur="blurInput"
							@confirm="sendMsg" />
					</view>
					<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg">发送</button>
				</view>

			</view>
			
		</view> -->

	</view>
</template>

<script>
	import {
		listTable,
		giveAlike,
		saveCircleReply,
		deleteCircleFriend
	} from '@/api/classCircle.js';
	import img1 from '@/static/find/wenzi.png';
	import img2 from '@/static/find/shipin.png';
	import chatInput from '../../../components/im-chat/chatinput.vue'; //input框
	export default {
		name: 'firendCircle',

		data() {
			return {
				show: false, //u-action-sheet  show
				list: [{
					text: '更换相册封面',
					fontSize: '28'
				}],
				content: '',
				placeholder: '',
				showInput: false,
				focus: false,
				id: '', //某一条朋友圈id
				commentInfo: {},
				inputOffsetBottom: 0, //键盘的高度
				viewOffsetBottom: 0, //视窗距离页面的距离
				sel: '', //选中的节点
				user_info: this.$util.getUser(),
				circleData: [],
				height: '0px',
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				pageMore: true,
				loading: false,
				status: 'loadmore',
				imgList: [{
					imgUrl: img1,
					text: '发文字/图片'
				}, {
					imgUrl: img2,
					text: '视频'
				}],

			};
		},
		onShow() {
			
			// this.getData()
		},
		
		components: {
			chatInput
		},
		onReachBottom: function() {
			//避免多次触发
			// if (this.loadingType == 1 || this.loadingType == 3||this.loadingType == 2) {
			// 	return;
			// }
			this.loadMoreFunc();
		},
		onLoad(op) {
			this.initParams()
			this.getData()
		},
		watch: {
			inputOffsetBottom: {
				handler(val) {
					if (val != 0) {
						this.$nextTick(() => {
							//暂时不支持h5的滚动方式 因为h5不支持键盘的高度监听
							//微信小程序会把input的焦点和placeholder顶起，正在寻找解决方案
							// #ifndef MP-WEIXIN || H5
							this.bindScroll(this.sel, 100);
							// #endif
						});
					}
				}
			}
		},
		methods: {
			del(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除？',
					success: async (res) => {
						if (res.confirm) {
							// uni.clearStorageSync();
							const {
								data
							} = await deleteCircleFriend(id)
							console.log('删除成功', data)
							this.initParams()
							this.getData()
						}
					}
				});

			},
			loadMoreFunc: function() {
				if (!this.pageMore) {
					// this.loadingType = 2;
					return;
				}
				this.getData(this.params)
			},
			initParams() {
				this.circleData = [];
				// this.loadingType = 4;
				this.params.pageNum = 1;
				this.pageMore = true;
			},

			pathRes(data) {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				if (data.code == 0) {
					uni.hideLoading();
					if (data.data.list.length == 0) {
						// this.loadingType = 3;
						this.status = 'nomore'
						return;
					}
					if (data.data.isLastPage) {
						this.pageMore = false;
						this.circleData = this.circleData.concat(data.data.list);
						// this.loadingType = 2;
						this.status = 'nomore'
					} else {
						if (data.data.isFirstPage) {
							this.circleData = data.data.list;
						} else {

							this.circleData = this.circleData.concat(data.data.list);
							console.log('不是第一页', this.circleData)
						}
						this.params.pageNum++;
						// this.loadingType = 0;
					}
					console.log('this.circleData', this.circleData)

					console.log('显示数据', this.circleData)
				} else {
					this.$api.showTip(res.data.msg);
				}
			},
			async getData() {
				const {
					data
				} = await listTable(this.params)
				if (data.code == 0) {
					data.data.list = data.data.list.map(it => {
						it.circleImage = JSON.parse(it.circleImage)
						return it
					})
				} else {
					this.$api.showTip('请求失败，稍后再试')
				}

				this.pathRes(data)

			},
			//自定义标题栏按钮
			onNavigationBarButtonTap({
				index
			}) {
				if (index == 0) {
					//发布朋友圈
					this.$u.route('pages/releaseFirendCircle/releaseFirendCircle');
				} else if (index == 1) {
					//返回按钮
					this.$u.route({
						type: 'back'
					});
				}
			},
			//打开底部更换相册封面弹窗
			showSheet() {
				this.show = true;
			},
			//点赞
			async clickThumb(item) {
				console.log('this.user_info', item)

				if (item.isPraise) {
					// 不点赞
					const {
						data
					} = await giveAlike({
						"type": "2",
						"id": item.id
					})
					item.praise.splice(item.praise.findIndex(items => items.userId === item.userId), 1)
				} else {
					// 点赞
					const {
						data
					} = await giveAlike({
						"type": "1",
						"id": item.id
					})
					item.praise.push({
						userId: this.$util.getUser().userId,
						userName: this.$util.getUser().username
					})
				}
				item.isPraise = !item.isPraise;

				// this.getData()

			},
			//跳转到名片
			linkToBusinessCard(userId) {

				// this.$u.route({
				// 	url: 'pages/businessCard/businessCard',
				// 	params: { userId }
				// });
			},
			//点击评论 唤出输入框和键盘
			handleComment(id, comment, index) {
				console.log('评论', id, comment, index)
				this.content = '';
				this.id = id;
				this.commentInfo = comment || {};
				this.placeholder = '评论：';
				if (comment) {
					this.sel = `#comment-${id}-${index}`;
					if (comment.replyUserId) {
						//xxx回复xxx ...

						this.placeholder = `回复${comment.userName}:`;
					} else {
						if (comment.userId == this.user_info.userId) {
							//如果是回复自己
							this.placeholder = `评论：`;
						} else {
							// xxx评论...
							this.placeholder = `回复${comment.userName}:`;
						}
					}
				} else {
					this.sel = `#comment-${'null'}-${index}`;
				}
				this.showInput = true;
			},
			//发送消息
			sendMsg(con) {
				console.log('fasong wwww', con)
				this.content = con.content
				if (!this.content.length) {
					return;
				}
				console.log('this.id', this.id)
				this.circleData.forEach(async item => {
					if (item.id == this.id) {
						console.log('相同的id')
						const {
							userId,
							username
						} = this.user_info;
						const {
							replyUserId,
							replyUserName,
						} = this.commentInfo;
						const params = {
							userId,
							userName: username,
							content: this.content,
							circleId: this.id
						};
						//如果是回复别人的话
						if (Object.keys(this.commentInfo).length) {
							if (this.commentInfo.replyUserId) {
								//点击了xxx回复xxx ...
								params.replyUserId = this.commentInfo.userId;
								params.replyUserName = this.commentInfo.userName;
							} else {
								if (this.commentInfo.userId !== this.user_info.userId) {
									//点击了 xxx评论...
									params.replyUserId = this.commentInfo.userId;
									params.replyUserName = this.commentInfo.userName;
								} else {
									//如果是回复自己
									// -- 保持params原来的参数不变
								}
							}
						}
						const {
							data
						} = await saveCircleReply(params)
						console.log('传递参数', params)
						item.comment.push(params);
					}
				});
				
				this.closeInputModel();
			},
			//将视图滚动到键盘的上方 微信小程序有些许bug 会把输入框的焦点和placeholder顶起... 、
			//暂时不适配微信小程序，正在解决此bug
			bindScroll(sel, duration = 0) {
				uni.createSelectorQuery()
					.select('#content')
					.boundingClientRect(data => {
						//最外层盒子节点
						uni.createSelectorQuery()
							.select(sel)
							.boundingClientRect(res => {
								if (!res) return;
								//选中的节点
								let windowHeight = 0;
								uni.getSystemInfo({
									success: system => {
										windowHeight = system.windowHeight;
									}
								});
								const inputKeyBoardHeight = uni.upx2px(100) + this
									.inputOffsetBottom; //input输入框和键盘的高度
								const contentHeight = windowHeight - inputKeyBoardHeight; //可视内容的高度（除去input输入框和键盘）
								let scrollTop = 0;
								scrollTop = res.top - data.top - contentHeight + res
									.height; //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离再减去可视内容的高度然后再加上此元素的高度
								uni.pageScrollTo({
									duration,
									scrollTop
								});
							})
							.exec();
					})
					.exec();
			},
			//查看大图
			previewImg(current, imgList,index) {
				console.log('点击查看大图222', current,imgList,)
				uni.previewImage({
					current,
					urls: imgList,
					// #ifndef MP-WEIXIN
					indicator: 'number'
					// #endif
				});
			},
			//关闭键盘 关闭输入框
			closeInputModel() {
				console.log('触发了',this.content)
				this.showInput = false;
				this.content = '';
				this.id = '';
				this.commentInfo = {};
				uni.hideKeyboard();
			},
			//失去焦点触发
			blurInput() {
				this.closeInputModel();
			},
			keyboardheightchange(res) {
				console.log(res);
			},
			//点击相册封面弹窗选择项
			clickAction(index) {
				if (index == 0) {
					this.$u.route('pages/chooseBgImg/chooseBgImg');
				}
			},
			//点击自定义组件相机按钮
			linkToRelease() {
				console.log('跳转')

				this.$refs.popup.open('bottom')

			},
			// 发送文字
			sendText() {
				this.$refs.popup.close()
				uni.navigateTo({
					url: '/pages/tabbar/find/releaseFirendCircle/releaseFirendCircle?type=text'
				})
				uni.removeStorageSync('selectClass');
				uni.removeStorageSync('selectClassIndex');
			},
			sendVideo() {
				this.$refs.popup.close()
				uni.removeStorageSync('selectClass');
				uni.removeStorageSync('selectClassIndex');
				this.chooseVideo()

			},
			// 上传视频
			async chooseVideo() {

				// uploadFile 存储需要上传的文件
				let uploadFile = '';
				// 1.选择要上传的视频
				const res = await uni.chooseVideo({
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['camera', 'album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
				});
				uploadFile = res[1].tempFilePath;
				if (uploadFile.length) {
					console.log('uploadFile222222222222', uploadFile);
					var that2 = this;
					// 2.上传所选视频到服务器
					uni.showLoading({
						mask: true,
						title: '上传中...'
					})
				}

				const arr = await uni.uploadFile({
					// 需要上传的地址
					url: this.$config.URL + "api/app/sysFile/v1/save",
					// filePath  需要上传的文件
					filePath: uploadFile,
					name: 'file',
					header: {
						token: this.$util.getUser().accessToken // 挂载请求头为用户的 token
					},
					success: (uploadFileRes) => {
						console.log('uploadFileRes', uploadFileRes)
						let data = JSON.parse(uploadFileRes.data)

						if (data.state == 'SUCCESS') {
							uni.navigateTo({
								url: '/pages/tabbar/find/releaseFirendCircle/releaseFirendCircle?type=video&url=' +
									data.url
							})
							uni.hideLoading()


						} else {
							uni.hideLoading() // 视频上传失败了
							this.$api.showTip('上传失败,请重试')
							return
						}
					}
				});

				//    let data = JSON.parse(arr[1].data)
				//    console.log('data:222222222222222', data);
				//    if(data.state == 'SUCCESS') { 
				// 	uni.navigateTo({
				// 		url:'/pages/tabbar/find/releaseFirendCircle/releaseFirendCircle?type=video&url='+data.url
				// 	})
				// 	uni.hideLoading()// 视频上传失败了


				//    }else{
				// 	uni.hideLoading()
				// 	this.$api.showTip('上传失败,请重试')
				// 	 return
				// }
				// 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)


			}
		},
		onReady() {
			//兼容h5在pages.json中设置 autoBackButton：false无效  其实只是想修改下默认返回按钮的样式，发现不生效...
			// #ifdef H5
			// const icon = document.getElementsByClassName('uni-page-head-btn')[0];
			// icon.style.display = 'none';
			// #endif

			//设置input输入框距离键盘的高度 --也就是键盘的高度
			//设置view距离键盘和输入框的高度
			//h5暂不支持键盘的高度监听
			uni.onKeyboardHeightChange(res => {
				this.inputOffsetBottom = res.height;
				console.log('高度', res.height)
				this.viewOffsetBottom = res.height + uni.upx2px(100);
				console.log('新高度', this.viewOffsetBottom, uni.upx2px(100))
				if (res.height == 0) {
					// #ifndef MP-WEIXIN
					this.showInput = false;
					// #endif
				}
			});
		},
		//下拉刷新
		async onPullDownRefresh() {
			this.initParams()
			await this.getData();
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.svg-icon {
		width: 1em;
		height: 1em;
		vertical-align: -.15em;
		fill: currentColor;
		overflow: hidden;
	}

	// /deep/.uni-video{
	// 	width: 160rpx!i;
	// 	height: 160rpx;
	// }
	.comment-hover-class {
		background-color: #f3dada;
	}

	image {
		will-change: transform;
	}

	.content {
		&-imgbox {
			position: relative;

			.bgimg {
				width: 100%;
				height: 560rpx;
			}

			.headimg {
				width: 110rpx;
				height: 110rpx;
				border-radius: 6rpx;
				position: absolute;
				right: 30rpx;
				bottom: -20rpx;
			}

			.nickname {
				color: #ffffff;
				position: absolute;
				right: 170rpx;
				bottom: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		&-circle {
			&-box {
				padding: 18rpx 30rpx;
				border-bottom: 1rpx solid #f2eeee;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;

				.headimg {
					width: 70rpx;
					height: 70rpx;
					background-color: #f6f1f7;
					border-radius: 50%;
					line-height: 100rpx;
					text-align: center;

					.img {
						width: 80%;
						height: 80%;
						border-radius: 10rpx;
					}
				}

				.content {
					flex: 1;
					padding-left: 18rpx;
					font-size: 30rpx;

					&-name {
						color: #36648b;
					}

					&-desc {
						color: $u-main-color;
						padding-top: 6rpx;
						line-height: 34rpx;
					}

					&-img {
						margin-top: 10rpx;

						.img-1 {
							will-change: transform;
							// width: 280rpx;
							// height: auto;
							width: 300rpx;
							height: 300rpx;
							max-height: 600rpx;
						}

						&-more {
							display: flex;
							flex-wrap: wrap;

							.img-more {
								display: block;
								width: 160rpx;
								height: 160rpx;
								margin: 4rpx;
							}

							.img-3 {
								margin: 4rpx 4rpx 4rpx 0;
							}
						}
					}

					.msg-box {
						width: 100%;
						background-color: $u-error-light;
						margin-top: 15rpx;
						border-radius: 4rpx;

						.thumbinfo {
							// border-bottom: 1rpx solid gray;
							padding: 6rpx;
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							&-icon {
								width: 34rpx;
								height: 28rpx;
								line-height: 28rpx;
								margin-right: 15rpx;
								text-align: center;
								vertical-align: middle;
								padding-left: 10rpx;
							}

							&-name {
								font-size: 28rpx;
								color: #36648b;
							}
						}

						.comment {
							padding: 6rpx 8rpx;
							color: $uni-text-color;
							font-size: 28rpx;

							&-box {
								padding: 4rpx 0;

								&-name {
									color: #36648b;

									.callback {
										color: $uni-text-color;
									}
								}

								&-content {
									word-break: break-all;
								}
							}
						}
					}
				}

				.relavivetime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;

					.time {
						color: $uni-text-color-grey;
					}

					.icon-box {
						display: flex;
						align-items: center;

						&-item {
							background-color: #f1f1f1;
							padding: 4rpx 12rpx;
							border-radius: 6rpx;

							&.thumb {
								margin-right: 10rpx;
							}
						}

						.img {
							width: 56rpx;
							height: 46rpx;
						}
					}
				}
			}
		}

		.input-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: content-box;
			z-index: 9999999;
			background-color: #eaeaea;

			/* #ifdef MP-WEIXIN */
			padding-bottom: 0rpx;
			/* #endif */

			/* #ifndef MP-WEIXIN */
			margin-bottom: 0rpx;
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);

			/* #endif */
			&-flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				padding: 0 20rpx;
				height: 100rpx;

				&-grow {
					flex-grow: 1;

					.content {
						background-color: #fff;
						height: 60rpx;
						padding: 0 20rpx;
						border-radius: 12rpx;
						font-size: 28rpx;
						caret-color: $uni-color-success;
					}
				}

				.btn {
					margin-left: 20rpx;
					background-color: $u-success;
					border: none;
				}
			}
		}

		.signature {
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			color: gray;
			padding: 35rpx 30rpx 35rpx 100rpx;
			text-align: right;
		}

		.slot-wrap {
			display: flex;
			align-items: center;
			padding: 0 10rpx;
		}
	}

	// 底部弹窗
	/deep/.uni-popup {
		z-index: 9999;
	}

	/deep/.uni-popup .uni-popup__wrapper {
		height: 200rpx;
		border-top-left-radius: 10rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
	}

	.pub {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;

		.pubType {
			flex: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.t-icon {
				margin-bottom: 20rpx;
			}
		}
	}

	.foot {
		position: fixed;
		width: 100%;
		height: 140rpx;
		min-height: 140rpx;
		left: 0upx;
		bottom: 0;
		overflow: hidden;
		z-index: 999999;
		margin-bottom: 50px;
	}

	.del {
		margin-left: 10px;
		color: #333;
	}
</style>